
<template>
<div class="photoinfo-container">
    <!-- 标题区域 -->
    <h3>{{ photoinfo.title }}</h3>
    <p class="photoinfo-subtitle">
        <span>发表时间：{{ photoinfo.add_time | dateFormat }}</span>
        <span>点击：{{ photoinfo.click }}次</span>
    </p>

    <hr>
    <!-- 缩略图区域 -->
   <div class="thumbs">
      <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
    </div>
    <!-- 图片内容区域 -->
    <div class="content" v-html="photoinfo.content"></div>


    <!-- 评论子组件区域 -->
   <cmt-box :id="id"></cmt-box>
</div>
    
</template>

<script>
// 1、导入评论子组件
import Comment from '../subcomponents/comment.vue'
export default {
    data () {
        return {
            id: $route.params.id,
            photoinfo : {},
            list:[]
        }
    },
    created (){
        this. getPhotoInfo ()
        this.getThumbs()
    },
    methods : {
        getPhotoInfo () {
            this.$http.get('api/getimageInfo/'+this.id).then(result =>{
                if (result.body.status === 0 ) {
                    this.photoinfo = result.body.message
                }
            })
        },
        getThumbs () { //缩略图
            this.$http.get('api/getthumimages/'+this.id).then(result => {
                if (result.body.status ===0 ) {
                    result.body.message.forEach(item=> {
                        item.w =600;
                        item.h=400;
                    })
                    this.list =result.body.message
                }
            })
        }
    },
    // 注册评论子组件
    components : {
        'cmt-box' :Comment
    }
}
    
</script>

<style lang="scss" scoped>
.photoinfo-container{
    padding: 0 3px;
    h3 {
        font-size: 15px;
        color: #22aff2;
        text-align: center;
        margin: 10px 0;
    }
    .photoinfo-subtitle {
        font-size: 13px;
        display: flex;
        justify-content: space-between;
    }

    .content{
        font-size: 13px;
        line-height: 30px;
    }
    .thumbs{
        margin: 8px;
        box-shadow: 0 0 9px #999;
    }
}

</style>

